<template>
  <div class="login">
    <div class="login-content">
      <p class="login-title">登录我的个人博客</p>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!-- 用户名 -->
  <el-form-item label="用户名" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
        <!-- 密码 -->
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="ruleForm.password"></el-input>
  </el-form-item>

    <!-- 登录按钮 -->
     <el-form-item>
          <el-button type="primary" class="login-button" @click="submitForm('ruleForm')">登录</el-button>
          <el-button class="login-button" @click="resetForm('ruleForm')">重置</el-button>
     </el-form-item>
    </el-form>
  </div>
  </div>
</template>


<script>
    export default{
        data(){
            return{
        ruleForm: {
          name: '',
          password:''
            },
            rules: {
          name: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
          password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 7, max: 16, message: '长度在 7 到 16 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        submitForm(){
            this.$router.push('/01index');
        },
        resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
    }
</script>

